<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link type="text/css"
	href="jquery/css/dark-hive/jquery-ui-1.8.13.custom.css"
	rel="Stylesheet" />
<link type="text/css" href="css/workspace.css" rel="Stylesheet" />
<link type="text/css" href="wdContextMenu/css/contextmenu.css"
	rel="stylesheet" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript"
	src="jquery/js/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript"
	src="wdContextMenu/src/Plugins/jquery.contextmenu.js"></script>
<script type="text/javascript" src="jquery/js/jquery.fileinput.min.js"></script>
<script type="text/javascript" src="jquery/js/data.js"></script>

<script type="text/javascript" src="jquery/js/save.js"></script>
<script type="text/javascript" src="jquery/js/XMLWriter-min.js"></script>

<link type="text/css" href="menu/menu.css" rel="stylesheet" />
<script type="text/javascript" src="menu/menu.js"></script>

<link href="jquery/js/skin-vista/ui.dynatree.css" rel="stylesheet"
	type="text/css" id="skinSheet">
<script src="jquery/js/jquery.dynatree.js" type="text/javascript"></script>

<script type="text/javascript" src="jquery/js/anim.js"></script>
<script type="text/javascript" src="jquery/js/load.js"></script>

<!-- Classes -->
<script type="text/javascript" src="classes/object.class.js"></script>
<script type="text/javascript" src="classes/state.class.js"></script>
<script type="text/javascript" src="classes/proc.class.js"></script>
<script type="text/javascript" src="classes/opd.class.js"></script>
<script type="text/javascript" src="classes/obj.class.js"></script>
<script type="text/javascript" src="classes/elem.class.js"></script>
<script type="text/javascript" src="classes/elemstate.class.js"></script>
<script type="text/javascript" src="classes/item.class.js"></script>


<title>Vivid OPM Workspace</title>
<script type='text/javascript'>

$().ready(function() {
	
	getModelsList();
	$('button, input:submit').button();

	$('#layerslist').change(layerChanging);
	$('#vividworkspace').hide();
	$('#vividplayer').hide();
	$('#vividfile').hide();
	$('#vividhelp').hide();
	$('#vividabout').hide();
	$("#menu").hide();
	$('#mode_workspace').click(function() {
		$('#vividabout').hide();
		$('#vividhelp').hide();
		$('#vividplayer').hide();
		$('#vividworkspace').show();	
	});
	$('#mode_player').click(function() {
		$('#vividabout').hide();
		$('#vividhelp').hide();
		$('#vividworkspace').hide();
		$('#vividplayer').show();
		$.ajax({
			type: "GET",
			url: "models/" + model_name + "/save.xml",
			dataType: "xml",
			error: function (){
				alert("Warning! Animation cannot be launched. Please save spatial arrangement.")
			},
			success: function(){
				init();			
			}
		});		

	});
	$('#mode_about').click(function(){
		$('#vividworkspace').hide();
		$('#vividplayer').hide();
		$('#vividhelp').hide();
		$('#vividabout').show();
	});
	$('#mode_help').click(function(){
		$('#vividworkspace').hide();
		$('#vividplayer').hide();
		$('#vividabout').hide();
		$('#vividhelp').show();
	});
	$('#model_upload_btn').click(function() {
		 var reload = true;
		 var filename = null;
         var input_field = $('#upload_iframe').contents().find('input:file');
         input_field.click();
         input_field.change(function() {
        	filename = input_field.val();
  	  	   	filename = filename.replace('C:\\fakepath\\','');
  	  	   	filename = filename.split('.')[0];

      	   	$('#upload_iframe').contents().find('form').submit();

      	    model_name = filename;
            model = 'models/' + filename + '/' + filename + '.opx';
			$('#model_choosing').hide();
 			$('#vividworkspace').show();
 			$("#menu").show();

 		    	
         });
         
         $('#upload_iframe').load(function() {
				if (reload) {
					reload = false;
  					$('#upload_iframe').attr('src', 'upload.html');
  				//to be later removed
  		 		    opxReading();
				}
         });
         
	});
	$('#submit_selected_model').click(function() {
		model_name = $('#models_select option:selected').val();
		model = 'models/' + model_name + '/' + model_name + '.opx'; 
		$('#model_choosing').hide();
		$('#vividworkspace').show();
		$("#menu").show();

		saveLoading();
	});
	//$('#workspace').selectable();
	
	// PLAYER TOOLBAR INITIALIZATION
	$( "#player_play" ).button({
		text: false,
		icons: {
			primary: "ui-icon-play"
		}
	})
	.click(function() {
		var options;
		if ( $( this ).text() === "play" ) {
			options = {
				label: "pause",
				icons: {
					primary: "ui-icon-pause"
				}
			};
		} else {
			options = {
				label: "play",
				icons: {
					primary: "ui-icon-play"
				}
			};
		}
		$( this ).button( "option", options );
	});
	$( "#player_stop" ).button({
		text: false,
		icons: {
			primary: "ui-icon-stop"
		}
	})
	.click(function() {
		$( "#player_play" ).button( "option", {
			label: "play",
			icons: {
				primary: "ui-icon-play"
			}
		});
	});
});

var active_id = null;
var option = { width: 150, items: [
                            { text: "Pick an icon", icon: "wdContextMenu/sample-css/wi0126-16.gif", alias: "1-1", action: menuAction },
                            ], onShow: applyrule,
                onContextMenu: BeforeContextMenu
            };
            function menuAction() {
               var filename = null;
               var reload = true;
               var input_field = $('#upload_iframe').contents().find('input:file');
               input_field.attr('name', model_name);
               input_field.click();
               input_field.change(function() {
            	   	filename = input_field.val();
           	  	   	filename = filename.replace('C:\\fakepath\\','models/' + model_name + '/');
            	   	$('#upload_iframe').contents().find('form').submit();
               });

               $('#upload_iframe').load(function() {
					if (reload) {
           	  			var active_element = $('#' + active_id + ' img');
      					var eheight = active_element.parent().css('height');
      					var ewidth = active_element.parent().css('width');

						var previous_icon = active_element.attr('src');
          				
      					active_element.attr('src', filename);
      					active_element.css('height', eheight);
      					active_element.css('width', ewidth);

      					if (previous_icon == 'images/object.png') {
	      					var new_id = active_id.slice(3);
	      					for (var i in states_list) {
	      						if (states_list[i].id == new_id) {
	      							new_father_id = states_list[i].object_name;
	      						}
	      					}
	      					for (var i in states_list) {
	      						if (states_list[i].object_name == new_father_id) {
	      							active_id = "box" + states_list[i].id;
	      							active_element = $('#' + active_id + ' img');
	      							eheight = active_element.parent().css('height');
	      							ewidth = active_element.parent().css('width');
	      			
	      							active_element.attr('src', filename);
	      							active_element.css('height', eheight);
	      							active_element.css('width', ewidth);
	      						}
	      					}
      					}
      					reload = false;
      					$('#upload_iframe').attr('src', 'upload.html');
					}
      				
               });
               
               
            }
            function applyrule(menu) {               
                if (this.id == "target2") {
                    menu.applyrule({ name: "target2",
                        disable: true,
                        items: ["1-2", "2-3", "2-4", "1-6"]
                    });
                }
                else {
					active_id = this.id;
                    menu.applyrule({ name: "all",
                        disable: true,
                        items: []
                    });
                }
            }
            function BeforeContextMenu() {
                return this.id != "target3";
            }
                        
var wsx_save;
var model = null;
var model_name = null;
var id_counter = 10000;
var objects_list = { };
var states_list = { };
var opd_list = { };
var obj_list = { };
var process_list = { };

var player_show_labels = false;

var num_of_layers = 1;
var current_layer = 1;

var layers = new Array();
layers.push(num_of_layers);

//alert(model_exists);

function statelistChecking(id, checked) {
	var id_number = id.replace('stateslist_state','');
	var box_entity = states_list[id_number].html_entity;
	
	if (checked) {
		//box_entity.css('border', '3px solid #F39814');
		box_entity.show();
		box_entity.draggable({ disabled: false });	
	} else {
		//box_entity.css('border', '1px solid black');		
		box_entity.hide();
		box_entity.draggable({ disabled: true });
	}
}

function randomFromTo(from, to){
	return Math.floor(Math.random() * (to - from + 1) + from);
} 

function drawBox(state, object, layer_num) {
	//var state = new OPMState(id_counter, simpson.name + 'State' + id_counter, simpson);
	//simpson.addState(state);
	//states_list[id_counter] = state;
	for(var x in obj_list)
	{
		if (obj_list[x].oid == object.id)
		{
			obj_list[x].layer = layer_num;
		}
	}
	object.layer = layer_num;
	var xpos = randomFromTo(310, 900);
	var ypos = randomFromTo(95, 600);

	var workspace_item_html =	'<div id="box' + state.id + '" class="object">'
										+ '<img id="objectimg' + state.id + '" src="images/object.png" style="width: 48px; height: 48px; border:1px dotted black" />'
										+ '<div style="text-align:center;">' + object.name + ':' + state.name + '</div>'
										+ '</div>';
							
	var statelist_item_html = '<li class="selected" class="ui-widget-content" id="stateslist_state' + state.id + '">'
										+ state.name
										+ '</li>';
	
	$('#workspace' + layer_num).append(workspace_item_html);
 //$('#stateslist' + current_layer).append(statelist_item_html);
	$('#sl' + layer_num + 'obj' + object.id + ' > ul').append(statelist_item_html);
	$('#objectimg' + state.id).resizable();

	state.html_entity = $('#box' + state.id);
	state.html_entity
		.draggable({ containment: 'parent' , stack : '.object'})
		.contextmenu(option)
		.offset({ top: state.html_entity.offset().top + ypos, left: state.html_entity.offset().left + xpos });
	

	state.stateslist_entity = $('#stateslist_state' + state.id);
	state.stateslist_entity
		.click(statelistChecking);
		
		
//	$('#objectimg' + state.id).resizable();
	
	//id_counter++;
}

function drawSavedBox(state, object, layer_num) {
	
	
	var workspace_item_html =	'<div id="box' + state.id + '" class="object" style="top:' + state.top + 'px; left:' + state.left + 'px; ">'
										+ '<img id="objectimg' + state.id + '" src="' + state.icon + '" style="height:' + state.height + '; width:' + state.width + '; border:1px dotted black " />'
										+ '<div style="text-align:center;">' + object.name + ':' + state.name + '</div>'
										+ '</div>';
							
	var statelist_item_html = '<li class="selected" class="ui-widget-content" id="stateslist_state' + state.id + '">'
										+ state.name
										+ '</li>';
	
	$('#workspace' + layer_num).append(workspace_item_html);
 //$('#stateslist' + current_layer).append(statelist_item_html);
	$('#sl' + layer_num + 'obj' + object.id + ' > ul').append(statelist_item_html);
	$('#objectimg' + state.id).resizable();

	
	
	states_list[state.id].html_entity = $('#box' + state.id);
	states_list[state.id].html_entity
		.draggable({ containment: 'parent' , stack : '.object'})
		.contextmenu(option)
		.offset({ top: states_list[state.id].html_entity.offset().top, left: states_list[state.id].html_entity.offset().left});
	

	states_list[state.id].stateslist_entity = $('#stateslist_state' + state.id);
	states_list[state.id].stateslist_entity
		.click(statelistChecking);
}

function layerAdding() {
	num_of_layers++;
	layers.push(num_of_layers); 
	$('#workspaces').append('<div id="workspace' + num_of_layers + '" class="workspace"></div>');
	$('#statelists').append('<div id="tree' + num_of_layers + '"><ul id="stateslist' + num_of_layers + '" class="stateslist"></ul></div>');
	$('#layerslist').append('<option value="' + num_of_layers + '">Layer ' + num_of_layers + '</option>');
	$('#custom_level').append('<option value="' + num_of_layers + '">Layer ' + num_of_layers + '</option>');

	$('#workspace' + num_of_layers).hide();
	$('#tree' + num_of_layers).hide();
}
function stateAdding() {
	var opm_object = new OPMObject(id_counter, 'Object' + id_counter);
	objects_list[id_counter] = opm_object;
	var opm_state =  new OPMState(id_counter, id_counter, id_counter);
	states_list[id_counter] = opm_state;
	opm_object.addState(opm_state);
	drawBox(opm_state, id_counter, opm_object.name);	
	$('#stateslist' + current_layer).append('<li class="selected" id="sl' + current_layer + 'obj' + id_counter +'">' + opm_object.name + '<ul></ul></li>');
	id_counter++;
}
function layerChanging() {
	$('#workspace' + current_layer).hide();
	$('#tree' + current_layer).hide();
	
	current_layer = $(this).val();
	
	$('#workspace' + current_layer).show();
	$('#tree' + current_layer).show();
}

function bgChanging(){
	var filename = null;
   var reload = true;
   var input_field = $('#upload_iframe').contents().find('input:file');
   input_field.attr('name', model_name);
   input_field.click();
   input_field.change(function() {
   	filename = input_field.val();
      filename = filename.replace('C:\\fakepath\\','models/' + model_name + '/');
      $('#upload_iframe').contents().find('form').submit();
   });

   $('#upload_iframe').load(function() {
		if (reload) 
		{
   		$(".workspace").css("background", "url('" + filename +"')");
			reload = false;
      	$('#upload_iframe').attr('src', 'upload.html');
		}				
	});
}

</script>
</head>
<body
	style="background: url('images/rubber_grip.png'); margin: 0; padding: 0;">

<!-- Top Menu Div -->
<div id="menu">
<ul class="menu">
	<li><a href="#" class="parent"><span>Model</span></a>
	<div>
	<ul>
		<li><a href="#"><span>Load</span></a></li>
		<li><a href="#" onclick="saving();"><span>Save</span></a></li>
		<li><a href="#" onclick="location.reload();"><span>Close</span></a></li>
	</ul>
	</div>
	</li>
	<li><a href="#" id="mode_workspace"><span>Workspace</span></a>
	<div>
	<ul>
		<li><a href="#" onclick="layerAdding();"><span>Add
		Layer</span></a></li>
		<li><a href="#"><span>Add State</span></a></li>
		<li><a href="#" onclick="bgChanging();"><span>Change Background</span></a></li>
		<li><a href="#" class="parent"><span>Tools</span></a>
		<div>
		<ul>
			<li><a href="#"><span>Draw Link</span></a></li>
			<li><a href="#"><span>Add Domain</span></a></li>
			<li><a href="#"><span>Add Trajectory</span></a></li>
		</ul>
		</div>
	</ul>
	</div>
	</li>
	<li><a href="#" id="mode_player"><span>Player</span></a>
	<div>
	<ul>
		<li><a href="#" onclick="click_button('RUN');"><span>Play/Pause</span></a></li>
		<li><a href="#" onclick="click_button('STOP');"><span>Stop</span></a></li>
		<li><a href="#" onclick="playerClear();"><span>Clear</span></a></li>
	</ul>
	</div>
	</li>
	<li><a href="#" id="mode_help"><span>Help</span></a></li>
	<li class="last"><a href="#" id="mode_about"><span>About</span></a></li>
</ul>
</div>
<br />
<br />

<!-- Vivid Workspace Div -->
<div id="vividworkspace" style="width: 1270px; margin-right: auto; margin-left: auto;">
	<div id="rightmenu" class="right">
		<fieldset style="border: none;">
			<legend>Layers Scroller</legend> 
			<select id="layerslist" style="width: 100%;">
				<option value="1">Layer 1</option>
			</select>
		</fieldset>
	<hr style="width: 90%; border: 0px; border-top: 1px solid #333; border-bottom: 1px solid #111;" />
	<fieldset style="border: none;">
		<legend>Object-States List</legend>
		<div id="statelists" style="height: 540px; overflow-x: hidden;">
			<div id="tree1">
				<ul id="stateslist1" class="stateslist">
				</ul>
			</div>
		</div>
	</fieldset>
	</div>
	<div id="workspaces">
		<div id="workspace1" class="workspace"></div>
	</div>
</div>

<!-- Vivid Player Div -->
<div id="vividplayer" style="width: 1270px; margin-right: auto; margin-left: auto;">
	<div id="statusmenu" class="right" style="font-size: 14px;">
		<b><h3 style="font-size: 16px; margin-left: 15px; margin-top: 8px;">Occurring Processes</h3></b>	
		<ol></ol>
	</div>
	<div id="player_toolbar" class="ui-widget-header ui-corner-all">
		<button id="player_play" onclick="click_button('RUN');">play</button>
		<button id="player_stop" onclick="click_button('STOP');">stop</button>
		<fieldset style="display: inline; border: none; vertical-align: top;">
			<input id="speedrange" type="range" min="0" max="10" value="0" step="1" />
		</fieldset>
		<input type="checkbox" value="0" id="toggle_elements_names" onclick="toggleElementsNames()">Show Objects' Names</input>
		<input type="checkbox" value="0" id="enable_custom_level" onclick="enableCustomLevel()">Show Level: </input>
		<fieldset style="border: none; display: inline;">	
			<select id="custom_level" style="width: 250%;" onchange="displayCustomLevel(value)" disabled="disabled">
				<option value="1">Layer 1</option>
			</select> 
		</fieldset>
	</div>
	<div id="player1" class="workspace">
		<h3 style="font-size: 16px; margin-left: 15px; margin-top: 12px;">Layer 1</h3>	
		<div class="alert alert-error alert-heading alert-block">Current Process Name</div>
	</div>
</div>

<!-- Vivid Help -->
<fieldset id="vividhelp" class="frame">
<h3>How to Start</h3>
<ol>
	<li>Upload the new model on the welcome screen.</li>
	<li>If the model has been previously created, choose it from the list, and press "GO"</li>
	<li>After positioning of objects on the Workspace Canvas is done,
	choose "Save"</li>
	<li>To play animation, click "Player" from the Menu</li>
	<li>To go back to workspace canvas, click "Workspace"</li>
</ol>
</fieldset>

<!-- About Div -->
<fieldset id="vividabout" class="frame">
<h3>Vivid OPM</h3>
<p>Vivid OPM aims to translate a conceptual OPM model into a
spatio-temporal model that is driven by the conceptual model. <br />
It represents the systems at a level that is closer to conceived reality
than the level at which the conceptual model is. <br />
An understanding does no require the knowledge of a specific modeling
methodology.</p>
<p>Developers: <br />
Sergey Bolshchikov <br />
Shay Mazor</p>

<p>
<center><small>Technion, 2011</small></center>
</p>
</fieldset>

<!-- Welcome Screen -->
<div>
	<fieldset id="model_choosing" class="frame">
		<legend>Vivid OPM</legend>
		<h3>Welcome!</h3>
		<div id="models_select_div">
			<h3 id="model_choosing_select">To start working, please pick a model or upload a new one.</h3>
			<select id="models_select"></select> <br /><br />
			<button id="model_upload_btn">Load</button>
			<button id="submit_selected_model">Start</button>
		</div>
		
	</fieldset>
</div>

<br />

<iframe id="upload_iframe" src="upload.html" style="height: 0px; width: 0px; visibility: hidden;"></iframe>

</body>
</html>
